<template>
  <div class="total" v-if="logstat === 1">
    <div class="tatalinfo">
      <img src="@/assets/img/login-1.png" alt="" />
    </div>
    <div class="logintab">
      <div class="logintop" style="cursor: pointer;" @click="lrName = 'Loginin'">登录</div>
      <div class="registtop" style="cursor: pointer;" @click="lrName = 'Registin'">注册</div>
    </div>
    <component :is="lrName" @loginsta="getloginsta" @Registdata="getRegistdata"></component>
    <component :is="fh"></component>
  </div>
</template>

<script>
import Loginin from '@/components/ins/Loginin.vue'
import Registin from '@/components/ins/Registin.vue'
import Header from '../Header.vue'
import Mregistin from './Mregistin.vue'
import Phonelogin from './Phonelogin.vue'
import Forgitpsw from './Forgitpsw.vue'
export default {
  props:{
    lorsta:{
      type: String,
      default: 'Loginin'
    }
  },
  data() {
    return {
      lrName: 'Loginin',
      logstat: 1,
      fh: ''
    }
  },
  created(){
    const that = this
    that.getloginsta()
    that.lrName = that.lorsta
    console.log("接收父传子参数",that.lorsta);
  },
  methods:{
    getloginsta(val){
      const that = this
      console.log('获取登录状态',val);
      if(val != null){
        that.logstat = val
        that.fh = 'Header'
        console.log('跳回');
        that.$emit('fhindex',val)
      }
    },
    getRegistdata(val){
      const that = this
      console.log("成功",val);
      if(val != null){
        that.lrName = val
      }
    }
  },
  components:{
    Loginin,
    Registin,
    Header,
    Mregistin,
    Phonelogin,
    Forgitpsw
  },
}
</script>

<style lang="less" scoped>
.total {
  width: 100%;
  height: 100%;
  position: relative;
  img {
    width: 100%;
    height: 975px;
  }
}
.logintab {
  display: flex;
  width: 600px;
  height: 500px;
  background-color: rgb(255, 255, 255);
  position: absolute;
  top: 220px;
  right: 300px;
  border-radius: 15px;
}
.logintop {
  width: 50%;
  height: 50px;
  line-height: 50px;
  text-align: center;
  font-size: 24px;
  color: rgba(31, 17, 230, 0.533);
  border-bottom: 2px solid rgba(31, 17, 230, 0.533);
  border-right: 2px solid rgba(31, 17, 230, 0.2);
}
.registtop{
  width: 50%;
  height: 50px;
  line-height: 50px;
  text-align: center;
  font-size: 24px;
  color: rgba(31, 17, 230, 0.533);
  border-bottom: 2px solid rgba(31, 17, 230, 0.533);
}
</style>
